<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../webjar/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../../webjar/bootstrap/3.3.7-1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../webjar/bootstrap-table/bootstrap-table.css">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../webjar/css/mystyle.css">

    <script src="../../webjar/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
    <script src="../../webjar/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container login">
    <div class="form-group">
        <input class="form-control" type="text" id="myInput">
    </div>
    <ul class="input-ul">
        <li ></li>
        <li >少量</li>
        <li >大量</li>
        <li >足量</li>
        <li >超量</li>
        <li >随你</li>
        <li >随意</li>
    </ul>
</div>

<style>
    *{margin:0;padding:0;}

    .login{width:400px; margin:0 auto; background:#EBEBEB; position:relative;}

    input{ width:230px; height:28px; margin:10px 0; line-height:28px;}
    .input-ul{width:232px; position:absolute; top:40px; list-style:none; background:#FFF; border:1px solid #000; display:none; padding:10px;}
    .input-ul li{margin:8px;padding:4px;}
    .input-ul li.active{ background:#CEE7FF;}
</style>

<script>
    $(function(){
        var inp =  $("#myInput");
        var inpul =  $(".input-ul");
        //点击document隐藏下拉层
        $(document).click(function(event){
            if($(event.target).is(inp)){return;}
            if($(event.target).attr("class") == ".input-ul" || $(event.target).is("li")){
                var liVal = $(event.target).text();
                inp.val(liVal);
                blus();
            }else{
                blus();
            }
        })

        function blus(){
            inpul.hide();
        }

        inp.keyup(function(){
            var tex = inp.val();//输入框的值
            inpul.children().each(function(index){
                if(index==0){$(this).text(tex).addClass("active").siblings().removeClass();}
            });
        });

        inp.focus(function(){
            var tex = inp.val();//输入框的值
            inpul.
            show();
        });

        //鼠标点击和悬停LI
        inpul.children().
        hover(function(){
            var indexLi = $(this).index();//获取当前鼠标悬停时的LI索引值;
            if($(this).index()!=0){
                $(this).addClass("active").siblings().removeClass();
            }
        })

    });
</script>

</body>
</html>